<template>
  <view class="container">
    <view class="main-title">密码登录</view>
    <view class="small-title" v-if="showpasswordPlaceholder">请输入密码</view>
    <view class="tel">
      <u-icon
        class="eye"
        :name="eye"
        @click="changePassword"
        color="#ddd"
        size="34"
        v-if="showPasswordClearIcon"
      ></u-icon>
      <view class="input">
        <input
          class="uni-input uni-input-password"
          :placeholder="passwordPlaceholder"
          v-model="Password"
          placeholder-style="font-size:40rpx;font-weight:bold;color:#666"
          maxlength="20"
          minlength="6"
          @input="clearInput"
          @focus="toggleSmalltitle(0)"
          @blur="toggleSmalltitle(1)"
          :password="showPassword"
        />
        <view
          class="dele-icon"
          v-if="showPasswordClearIcon"
          @click="clearIcon()"
        >
          <i-icon
            icon="iconquxiaoxunjia"
            type="single"
            size="34rpx"
            color="#e1e1e1"
          ></i-icon>
        </view>
      </view>
    </view>
    <view class="tips">密码由6-20位英文字母、数字符号组成</view>
    <!-- 获取验证码 -->
    <view class="btn">
      <button
        :class="isDisabled ? 'btn-disable' : 'btn-primary'"
        @click="$u.throttle(login, 3000)"
      >
        下一步
      </button>
    </view>
    <view class="passwordLogin" @click="$u.throttle(codeLogin, 3000)"
      >验证码登录</view
    >

    <!-- 弹窗筛选 -->
    <view class="popup">
      <u-popup border-radius="10" v-model="show" mode="bottom" length="43%">
        <view class="no-password">
          <view class="choose-popup-type">
            <view class="title">用户名或密码错误</view>
            <view class="big-title">建议使用短信验证码登录</view>
            <view class="send-num">
              <view class="send"> 验证码会通过短信发送至</view>
              <view class="num">{{ UserName }}</view>
            </view>
            <view class="send-code">
              <button class="code-btn" @click="$u.throttle(codeLogin, 3000)">
                获取验证码
              </button>
            </view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script src="./passwordLogin.js"></script>

<style scoped lang="scss">
@import './passwordLogin.scss';
</style>
